import React, { PureComponent } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

import './TransitionGroup.css'

export default class TransitionGroupDemo extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      names: ['姜总', '王总', '郑总']
    }
  }

  render() {
    return (
      <div>
        <TransitionGroup>
          {
            this.state.names.map((item, index) => {
              return (
                <CSSTransition key={item}
                    timeout={500}
                    classNames="item">
                  <div>
                    {item}
                    <button onClick={ e => this.subName(index) }>-</button>  
                  </div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={ e => this.addName() }>Add Name</button>
      </div>
    )
  }

  addName() {
    this.setState({
      names: [...this.state.names, 'name']
    })
  }

  subName(index) {
    const names = [...this.state.names]
    names.splice(index, 1)
    this.setState({
      names: names
    })
    // this.setState({
    //   names: this.state.names.filter((item, indey) => index !== indey)
    // })
  }
}